<template>
    <div class="wrap">
        <div id="container" v-loading="loading">
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">URL配置</h5>
                    <div class="stayRight ">
                        <el-button @click="confList(1)" icon="star-off">刷新</el-button>
                        <el-button type="primary" @click="showMonitor()">创建</el-button>
                    </div>

                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <div class="searchIpt">
                            <el-input v-model="condition" placeholder="请输入应用名称或URL搜索"></el-input>
                        </div>
                        <div class="searchbtn">
                            <el-button  @click="confList(1,10,condition)">搜索</el-button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="domain" label="应用名称" > </el-table-column>
                    <el-table-column prop="url" label="监控URL" > </el-table-column>
                    <el-table-column prop="remark" label="备注" > </el-table-column>
                    <el-table-column label="操作">
                        <template scope="scope">
                            <el-button  size="small"  type="text"   @click="showMonitor(scope.$index, dataArr)">编辑</el-button> |  
                            <el-button  size="small"  type="text"   @click="deleteConf(scope.$index, dataArr)">删除</el-button> |  
                            <el-button  size="small"  type="text"   @click="showUrlDiagram(scope.$index, dataArr)">链路</el-button> 
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesz" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </div>
                    <div class="pullLeft">
                        <el-button  size="small" name="button-del" @click="delAll()" :disabled="pdisabled">批量删除</el-button>
                    </div>
                </div>
            </section>
            <el-dialog :title="monitorTitle" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false">
                  <div class="scoreContainer tagCategory">
                      <el-form :model="confForm"  :rules="rules" ref="confForm" label-width="120px" class="demo-confForm">
                          <el-form-item label="应用名称" prop="domain">
                              <el-input v-model="confForm.domain"></el-input>
                          </el-form-item>
                          <el-form-item label="URL" prop="url">
                              <el-input type="text" v-model="confForm.url"></el-input>
                          </el-form-item>
                          <el-form-item label="备注" prop="remark">
                              <el-input type="textarea" v-model="confForm.remark"></el-input>
                          </el-form-item>
                      </el-form>
                  </div>
                  <span slot="footer" class="dialog-footer">
                      <el-button @click="creatDialogVislble = false">取 消</el-button>
                      <el-button type="primary" @click="creatSubmit('confForm')">确 定</el-button>
                  </span>
              </el-dialog>
              <el-dialog :title="urlTitle" :visible.sync="urlDialogVislble" class="customDialog team" :lock-scroll="false" size="full">
                 <div v-show="noDataShow" class="scoreContainer tagCategory" style="text-align: center;font-size: 20px;font-weight:bold;">
                    暂无数据
                 </div>
                <div class="scoreContainer tagCategory" v-show="hasDataShow">
                  <el-table class="thead" min-width="100%">
                   <el-table-column label="URL" min-width="60%"></el-table-column>
                   <el-table-column label="平均时间" min-width="20%"></el-table-column>
                   <el-table-column label="QPS"  min-width="20%"></el-table-column>
                  </el-table>
                  <el-table :data="treeArr" style="width: 100%" :show-header="false">
                    <el-table-column min-width="100%">
                      <template scope="props">
                        <el-tree :default-expand-all="expand" :render-content="renderContent" :data="treeData" :props="defaultProps"></el-tree>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-dialog>  
        </div>

    </div>
</template>

<script>
import { confList, modifyConf, deleteConf, deleteBatch, queryObject } from '@/api/urlDiagramData'
export default {
  data() {
    return {
      dataArr: null,
      treeArr: null,
      treeData: [{ }],
      condition: null,
      monitorTitle: '',
      creatDialogVislble: false,
      urlDialogVislble: false,
      currentPage: 1,
      pagesz: 10,
      totalSize: 0,
      multipleSelection: [],
      pdisabled: true,
      urlTitle: null,
      loading: false,
      noDataShow: false,
      hasDataShow: false,
      confForm: {
        id: '',
        domain: '',
        url: '',
        remark: ''
      },
      rules: {
        domain: [
          { required: true, message: '请输入应用名称', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入url', trigger: 'blur' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'url'
      },
      expand: false
    }
  },
  created() {
    this.confList(1)
  },
  methods: {
    confList(curr, size, condition) {
      if (size === undefined) {
        size = 10
      }
      var listQuery = { currPage: curr, pageSize: size, condition: condition }
      confList(listQuery).then(response => {
        this.dataArr = response.data.data
        this.totalSize = response.data.totalRows
        this.currentPage = curr
        this.pagesz = size
      })
    },
    showMonitor(index, data) {
      this.creatDialogVislble = true
      if (data !== undefined) {
        this.monitorTitle = '修改URL信息'
        this.confForm = {
          id: data[index].id,
          domain: data[index].domain,
          url: data[index].url,
          name: data[index].name,
          remark: data[index].remark
        }
      } else {
        this.monitorTitle = '创建URL信息'
        this.confForm = {
          domain: '',
          url: '',
          name: '',
          remark: ''
        }
      }
    },
    creatSubmit(confForm) {
      this.$refs[confForm].validate((valid) => {
        if (valid) {
          var tip = '确认创建？'
          console.log(this.confForm.id)
          if (this.confForm.id !== undefined) {
            tip = '确认修改？'
          }
          this.$confirm(tip, '提示', {
            type: 'warning'
          })
          .then(_ => {
            modifyConf(this.confForm).then(response => {
              this.creatDialogVislble = false
              this.confList(1)
              this.$message({
                message: '操作成功!',
                type: 'success'
              })
            })
          })
        .catch(_ => {})
        }
      })
    },
    deleteConf(index, data) {
      this.$confirm('确认删除？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        var listQuery = { id: data[index].id }
        deleteConf(listQuery).then(response => {
          this.confList(1)
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        })
      })
      .catch(_ => {})
    },
    delAll() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.id)
      }, this)
      const obj = {
        ids: idQuery.join(',')
      }
      this.$confirm('确定要删除选中的数据？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        deleteBatch(obj).then(response => {
          this.confList(1)
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        })
      })
    .catch(_ => {})
    },
    handleSizeChange(val) {
      this.confList(1, val, this.condition)
    },
    handleCurrentChange(val) {
      this.confList(val)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.pdisabled = false
      } else {
        this.pdisabled = true
      }
    },
    showUrlDiagram(index, data) {
      var _this = this
      _this.loading = true
      var listQuery = { id: data[index].id }
      queryObject(listQuery).then(response => {
        this.treeArr = response.data
        this.urlTitle = data[index].domain
        this.urlDialogVislble = true
        this.loading = false
        var json = response.data[0].json
        if (json !== '' && json !== undefined) {
          this.treeData = JSON.parse(json)
          this.hasDataShow = true
          this.noDataShow = false
        } else {
          this.hasDataShow = false
          this.noDataShow = true
        }
      })
    },
    renderContent(h, { node, data, store }) {
      return (
        <span style='min-width:100%'>
          <span>
            <span style='min-width:60%'>{node.label}</span>
          </span>
          <span style='float:right;min-width: 45%;'>
            <el-button style='font-size: 12px;min-width: 50%;' type='text'>{data.avgTime}</el-button>
            <el-button style='font-size: 12px;min-width: 50%;' type='text'>{data.qps}</el-button>
          </span>
        </span>)
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchIpt{
    width: 350px;
    display: inline-block;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}
.statusError{
    color: red;
}
.el-tree{
  border: 0px;
}
.cell{
  padding: 0px;
}
.el-table__empty-block{
  display:none;
}
.expand{
  float:right;
}
</style>


